<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2响应式的原理</title>
</head>
<body>
    
    <script>

        // 模拟Vue2中数据
        let obj = {
            name:'zs',
            age:'18',
            height:1.88
        }
        /*
            Object.defineProperty() 是一个属性级别的监听器  
            如果需要对一个对象或者数组进行监听
            那么需要对数组和对象进行遍历
            然后对每个属性进行监听
            如果属性是对象，那么还需要对这个对象进行深度监听
        */
        for (const key in obj) { // for in 遍历出每一个对象的key
            let value = obj[key]; // 获取每一个对象的value
            Object.defineProperty(obj, key, { // 监听每一个对象的key
                get(){
                    console.log(`${key}属性被访问了`);
                    return value
                },
                set(newValue){
                    console.log(`${key}属性被修改了修改的值`);
                    value = newValue
                }
            })

        }
        // obj.age = 55
        // console.log(obj.age);
        // console.log(obj);

        //  数组监听

        let arr = [1,2,3,4,5];
        for (const key in arr) {
            let value = arr[key];
            Object.defineProperty(arr, key, { // 监听每一个对象的key
                get(){
                    console.log(`${key}属性被访问了`);
                    return value
                },
                set(newValue){
                    console.log(`${key}属性被修改了修改的值`);
                    value = newValue
                }
            })
        }
        arr[0] = 55
        console.log(arr);
    </script>

</body>
</html>